import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {NzInputDirective} from 'ng-zorro-antd';
import {SignSelectorService} from './sign-selector.service';

@Component({
    selector: 'kylin-sign-selector',
    templateUrl: './sign-selector.component.html',
    styleUrls: ['./sign-selector.component.less']
})
export class SignSelectorComponent implements OnInit, AfterViewInit {
    @Input() layerType: string;
    applyLoading: boolean;
    @Input() isVisible: boolean;
    @Output() isVisibleChange = new EventEmitter();
    @Input() selectCallBack: any;
    @ViewChild('crtSVGEmbed', {static: true}) crtSVGEmbed: ElementRef;
    curSigns: any;
    selSign: any;
    crtSize = 10;
    crtRotation = 0;
    crtWidth = 1;
    crtStrokeWidth: any;
    crtOpacity = 1;
    selContentColor: any;
    selColor: string;
    svgNS = 'http://www.w3.org/2000/svg';
    signLibPath: string;
    selOutLineColor = '#000000';
    lineSigns: any;
    pointSigns: any;
    polygonSigns: any;

    constructor(private sanitizer: DomSanitizer, private signService: SignSelectorService) {
        this.lineSigns = this.signService.lineSigns;
        this.pointSigns = this.signService.pointSigns;
        this.polygonSigns = this.signService.polygonSigns;
    }


    ngOnInit() {
        this.curSigns = this.pointSigns;
        this.curSigns = this[this.layerType + 'Signs'];
        this.signLibPath = `/assets/svg-lib/${this.layerType}/`;
        this.curSigns.map(item => {
            item.src = this.cleanURL(this.signLibPath + item.svg + '.svg');
        });
        this.selSign = Object.assign({}, this.curSigns[0]);

    }

    onload(evt) {
        if (evt.target.getSVGDocument()) {
            this.setSelSign(this.selSign, evt.target);
            this.crtSVGEmbed = {nativeElement: evt.target};
        }
    }

    ngAfterViewInit(): void {
    }

    handleCancel() {
        this.isVisible = false;
        this.isVisibleChange.emit(false);
    }

    applySign() {
        this.selectCallBack({
            ...(this.selSign),
            size: this.crtSize,
            color: this.selColor,
            rotation: this.crtRotation,
            width: this.crtWidth,
            strokeWidth: this.crtStrokeWidth,
            outLineColor: this.selOutLineColor,
            opacity: this.crtOpacity,
            contentColor: this.selContentColor,
            selSignEmbedEle: this.crtSVGEmbed
        });
    }

    setSelSign(signInfo, svgItem) {
        this.selSign = Object.assign({}, signInfo);
        if (this.layerType === 'point') {
            this.crtSize = svgItem.getSVGDocument().querySelector('svg').getAttribute('width') as any || 1;
            this.selColor = svgItem.getSVGDocument().querySelector('path').getAttribute('fill') || '#000000';
            this.crtRotation = 0;
            if (this.crtSVGEmbed) {
                this.crtSVGEmbed.nativeElement.style.transform = ``;
            }
        } else if (this.layerType === 'polygon') {
            const contentPath = svgItem.getSVGDocument().querySelector('path.content');
            // this.selContentColor = this.selSign.key === 'color-fill' ? svgItem.getSVGDocument().querySelector('path.outline').getAttribute('fill') : contentPath.getAttribute('stroke');
            this.selContentColor = this.selSign.key.indexOf('-fill') === -1 ? contentPath.getAttribute('stroke') : contentPath.getAttribute('fill');
            this.crtStrokeWidth = svgItem.getSVGDocument().querySelector('path.outline').getAttribute('stroke-width');
            this.selOutLineColor = svgItem.getSVGDocument().querySelector('path.outline').getAttribute('stroke');
            this.crtOpacity = svgItem.getSVGDocument().querySelector('g').getAttribute('fill-opacity');
        } else if (this.layerType === 'line') {
            const groupEle = svgItem.getSVGDocument().querySelector('g');
            this.selColor = groupEle.getAttribute('stroke');
            this.crtWidth = groupEle.getAttribute('stroke-width');
        }
    }

    setCrtSignColor() {
        if (this.layerType === 'point') {
            this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('path').setAttribute('fill', this.selColor);
        } else if (this.layerType === 'line') {
            this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('g').setAttribute('stroke', this.selColor);
        }
    }

    setCrtSignSize() {
        this.crtSVGEmbed.nativeElement.style.transform = `scale(${this.crtSize / 20}) rotate(${this.crtRotation}deg)`;
    }

    setCrtSignRotation() {
        this.crtSVGEmbed.nativeElement.style.transform = `scale(${this.crtSize / 20}) rotate(${this.crtRotation}deg)`;
    }

    setCrtSignWidth() {
        this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('g').setAttribute('stroke-width', this.crtWidth);
    }

    setCrtStrokeWidth() {
        this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('path.outline').setAttribute('stroke-width', this.crtStrokeWidth);
    }

    setCrtSignOutLineColor() {
        this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('path.outline').setAttribute('stroke', this.selOutLineColor);
    }

    setSelContentColor() {
        if (this.selSign.key.indexOf('-fill') !== -1) {
            this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('path.content').setAttribute('fill', this.selContentColor);
        } else {
            this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('path.content').setAttribute('stroke', this.selContentColor);
        }
    }

    setCrtOpacityWidth() {
        if (this.selSign.key.indexOf('-fill') !== -1) {
            this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('path.content').setAttribute('fill-opacity', this.crtOpacity as any);
        } else {
            this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('g').setAttribute('fill-opacity', this.crtOpacity);
            this.crtSVGEmbed.nativeElement.getSVGDocument().querySelector('g').setAttribute('stroke-opacity', this.crtOpacity);
        }
    }

    cleanURL(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}
